<template>
  <div class="toolsbox">
      <a-icon @click="showOrHideTools" class="showOrHideBtn" type="tool" style="fontSize:30px" />
      <div class="tools" v-if="isShowTools">
        <div class="tool">
          <div class="toolName">大小:</div>
          <a-slider v-model="lineWidth" :min="10" :max="100" class="toolBtn"></a-slider>
        </div>
        <div class="tool">
          <div class="toolName">颜色:</div>
          <a-input  style="fontSize:20px" type="color" v-model="color" class="toolBtn" :predefine="predefineColors"></a-input>
        </div>
        <div class="tool">
          <div class="toolName">撤销:</div>
            <a-icon  style="fontSize:20px" type="rollback" class="toolBtn" @click="handleBack"/>
        </div>
        <div class="tool">
          <div class="toolName">清除:</div>
            <a-icon style="fontSize:20px" class="toolBtn" @click="handleClear" type="delete" />
        </div>
        <div class="tool">
          <div class="toolName">保存:</div>
            <a-icon style="fontSize:20px" type="save" class="toolBtn" @click="handleSave" />
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: "tools",
  data() {
    return {
      isShowTools: true,
      lineWidth: 10,
      color: "#666",
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585"
      ]
    };
  },
  methods: {
    showOrHideTools() {
      this.isShowTools = !this.isShowTools;
    },
    handleBack() {
      this.$emit("handleBack");
    },
    handleClear() {
      this.$emit("handleClear");
    },
    handleSave() {
      this.$emit("handleSave");
    }
  },
  watch: {
    lineWidth() {
      this.$emit("changeSize", this.lineWidth/2);
    },
    color() {
      this.$emit("changeColor", this.color);
    }
  }
};
</script>

<style scoped>
.toolsbox {
  background: #eee;
  border-radius: 10px;
  width: 130px;
  text-align: center;
}
.showOrHideBtn {
  cursor: pointer;
  margin:auto
}
.tools {
  padding: 10px;
}
.tool {
  display: flex;
  align-items: center;
  margin: 5px 0;
}
.tool .toolName {
  width: 50px;
  font-size: 18px;
  white-space: nowrap;
}
.tool .toolBtn {
  min-width: 50px;
  /* flex: 1; */
  text-align: center;
}

</style>
